<template>
  <view class="comput">
    <custom-navi :show-home="false">
      输码验证
      <view class="dataVerification" @tap='handleDataVerification' slot="right">验证记录</view>
    </custom-navi>
    <view class="comput-input">
      <view>{{v1}}</view>
      <view>{{v2}}</view>
      <view>{{v3}}</view>
      <view class='cencel' @tap='handleCancel' style="width:44rpx">
        <image src="/static/ic/shancu.png" mode='widthFix'></image>
      </view>
    </view>
    <key-btn
      @change="keyClick"
      :val="keyInputProps"
      @verification="handleConfirm"
    ></key-btn>
  </view>
</template>

<script>
import {confirm} from '../../api'
import keyBtn from '@/src/pages/components/keyborder'
export default {
  data () {
    return {
      keyInputProps: '',
    }
  },
  components: {
    keyBtn
  },
  computed: {
    v1 () {
      return this.keyInputProps.substring(0, 4)
    },
    v2 () {
      return this.keyInputProps.substring(4, 8)
    }, v3 () {
      return this.keyInputProps.substring(8, 12)
    }
  },
  methods: {
	  handleDataVerification(){
		  uni.navigateTo({
		  	url:'/src/pages/index/pages/record/index'
		  })
	  },
    async handleConfirm(){
		console.log(this.keyInputProps)
		const params={
			awardCode:this.keyInputProps
		}
      // const params={awardCode:parseInt(this.keyInputProps)}
      try{
        const {data}=await confirm(params)
        // this.$toest('兑换成功')
		this.$utils.common.toast.fail("兑换成功");
		       setTimeout(() => {
		        this.$utils.common.navigateBack()
		       }, 1000)
      }catch(err){
        console.log(err,7878787878)
		this.$utils.common.toast.fail(err.data.message);
        // this.$toest(err.data.message)
      }
    },
    handleCancel(){
      const len=this.keyInputProps.length
      console.log(this.keyInputProps.substring(len,len-1))
      this.keyInputProps=this.keyInputProps.substring(0,len-1)
    },
    handleVerification () {

    },
    keyClick (val) {

      this.keyInputProps = val
      
      // let value = this.extend(this.val.params[this.tabIdx].value);
      // let valueArray = value.split('/');
      // let valueString = '';
      // valueArray[this.inputIdx] = val;
      // for (const item of valueArray) {
      //   valueString += `/${item}`;
      // }
      // if (this.mode !== 'basic') {
      //   this.val.inputUnit[this.inputIdx].val = val
      // }
      // this.val.params[this.tabIdx].value = valueString.substring(1);

    }
  },
}
</script>

<style>
page {
  background: rgba(240, 245, 249, 1);
}
</style>

<style lang="scss" scoped>
.dataVerification{
height:40rpx;
font-size:32rpx;
font-family:PingFang SC;
font-weight:400;
line-height:40rpx;
color:rgba(255,255,255,1);
opacity:1;
}
.comput {
 
  .cencel{
    position: absolute;
    right: 30rpx;
    image{
      width: 44rpx;
    }
  }
  &-input {
     position: relative;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    font-size: 60rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 44rpx;
    color: rgba(3, 3, 3, 1);

    width: 690rpx;
    height: 120rpx;
    background: #ffffff;
    padding-left: 54rpx;
    padding-right: 30rpx;

    border-radius: 10rpx;
    margin: 0 auto;
    margin-top: 30rpx;
    view{
      width: 140rpx;
      margin-left:20rpx;
    }
  }
}
</style>